<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { HttpClient } from './utils/HttpClient'
import globalData, { GlobalDataConfig } from './utils/GlobalData'

declare module 'megalo/types/vue' {
  interface Vue {
    $mp: any,
    $http:HttpClient,
    $globalData:GlobalDataConfig,
    $store:any
  }
}

// https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
Component.registerHooks([
  'onLaunch', // 初始化
  'onShow', // 当小程序启动，或从后台进入前台显示
  'onHide', // 当小程序从前台进入后台
  'onError', // 错误监听函数
  'onPageNotFound', // 页面不存在监听函数
  'globalData'
])

// 这个值是为了与小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值
@Component({
  mpType: 'app'
} as any)

class App extends Vue {
  public async onLaunch (options) {
    // Do something initial when launch.
    console.log('App onLaunch, env文件自定义的环境变量VUE_APP_TEST值:', process.env.VUE_APP_ENV)
    Megalo.hideTabBar()
  }

  public onShow (options) {
    // Do something when show.
    console.log('App onShow')
  }

  public onHide () {
    // Do something when hide.
    console.log('App onHide')
  }

  public onError (msg) {
    console.log('App onError')
    console.log(msg)
  }

  public globalData () {
    return globalData
  }
}

export default App
</script>

<style lang="stylus" >

@import './app.styl';

</style>
